<template>
  <div class="home">
    <div class="headerpage">
      <div class="logo">
        <img src="../assets/img/logo.png" alt="" />
        <span>STELLAR</span>
      </div>
      <div class="links">
        <div :class="nowPage == 1 ? 'active' : ''" @click="toPage(1, 'page1')">
          Home
        </div>
        <div :class="nowPage == 2 ? 'active' : ''" @click="toPage(2, 'page2')">
          About Us
        </div>
        <el-dropdown @command="handleCommand">
          <span
            class="el-dropdown-link"
            :class="nowPage > 2 && nowPage < 11 ? 'active' : ''"
          >
            Pico Prime HFT<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="3">Vision</el-dropdown-item>
            <el-dropdown-item :command="4">Ultimate Goal</el-dropdown-item>
            <el-dropdown-item :command="5">PICO</el-dropdown-item>
            <el-dropdown-item :command="6">Introduce</el-dropdown-item>
            <el-dropdown-item :command="7">HFT</el-dropdown-item>
            <el-dropdown-item :command="8">Establish</el-dropdown-item>
            <el-dropdown-item :command="9">Technology</el-dropdown-item>
            <el-dropdown-item :command="10">Innovatice</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div
          :class="nowPage == 11 ? 'active' : ''"
          @click="toPage(11, 'page11')"
        >
          Advantages
        </div>
        <div
          :class="nowPage == 12 ? 'active' : ''"
          @click="toPage(12, 'page12')"
        >
          Contact Us
        </div>
        <div class="engbox">
          <img src="../assets/img/eng.png" alt="" />
          ENG
        </div>
      </div>
      <div class="loginBtn" @click="toLogin">
        <span>Login Now</span>
      </div>
    </div>

    <div class="mainPage">
      <div class="mainbox" ref="page1">
        <div class="text">
          <div class="label">
            <div>INNOVATIVE</div>
            <div>TECHNOLOGY</div>
            <div>MARKET DOMINATION</div>
          </div>
          <div class="other">Create Wealth，Serve the People</div>

          <div class="createBtn">
            <span>Learn More</span>
            <img src="../assets/img/right.png" alt="" />
          </div>

          <div class="smallText">
            Experience the power of innovative technology as you command the
            tradingmarket from the vantage point of a financial giant.
            Seamlessly filter orderswith lightning speed, ensuring only theand
            implement quantitative strategiesansive financial landscape. Backed
            byhighest-quality transactions in the expcutting-edge technology,
            every financial product becomes a lucrative asset inour arsenal.
          </div>
        </div>
        <div class="imgbox">
          <img src="../assets/img/main1.png" alt="" />
        </div>
      </div>

      <div class="mainPage2" ref="page2">
        <div class="leftText">
          <div class="title">ABOUT US</div>
          <div class="label">
            Established in New Jersey, USA in 2003. Weinitially specialized in
            delivering a diverse rangeof financial products, advanced
            technologysolutions, financial management services, riskconsultancy,
            and bespoke application systemstailored to specific clientele
          </div>

          <img src="../assets/img/main2.png" alt="" />
        </div>
        <div class="rightText">
          <div class="title1">SINCE 2007</div>
          <div class="desc">
            The company has elevated its oferings in diverse financial
            technology software for high -end institutional clientele,
            meticulouslyconducting testing and system maintenance to attain
            outstanding performance in both industry software provision and
            precisioncomputing solutions.The company has elevated its offerings
            in diverse financial technology software for high-end
            institutionalcientele, meticulously conductina testing and svstem
            maintenance to attaln outstandina pertormance in both ingustry
            sotwareprovision and precision computing solutions.
          </div>
          <div class="title1" style="margin-top: 30px">IN 2012</div>
          <div class="desc">
            The Group established a financial investment advisory team,
            expanding its services to encompass small and
            medium-sizedinstitutions and retail customers, fostering
            higher-quality market growth and introducing a range of premium
            financial productsFueled by extensive long-term data research and
            the establishment of numerous software hubs, the Group commenced
            offerinotalored one-stop financial technology services in 2015,
            engaging in private investment and wealth management
            venturesConcurrently, an internal R&D team was established in the
            same year, dedicated to the development of intelligent and
            high-frequency trading systems. Following relentless dedication, the
            R&D team achieved a technological breakthrough in 2019 with
            thesuccessful development of the "Pico Prime High-Frequency System".
          </div>
        </div>
      </div>

      <div class="mainPage3"  ref="page3">
        <div class="lists">
          <img src="../assets/img/page3_1.png" alt="" />
          <div class="text">
            <div class="title">MISSON</div>
            <div class="desc">
              We persist in investing in high-tech research anddevelopment,
              advancing high-frequency tradingtechnology, and advocating for the
              widespreadadoption of high-frequency investment projects.
            </div>
          </div>
        </div>
        <div class="lists">
          <img src="../assets/img/page3_2.png" alt="" />
          <div class="text">
            <div class="title">VISION</div>
            <div class="desc">
              Position ourselves as the foremost leader and premierprovider of
              high-frequency trading systems in theAsia-Pacific region.
            </div>
          </div>
        </div>
        <div class="lists">
          <img src="../assets/img/page3_3.png" alt="" />
          <div class="text">
            <div class="title">BELIEF</div>
            <div class="desc">
              With a diversified and robust technical foundation, weare equipped
              to navigate myriad possibilities. Firmlybelieving in the power of
              mature intelligenttechnology and innovative thinking, we
              continuouslydevelop new trading tools to adapt to diversemarkets,
              Regardless of the market's direction, weensure profitability for
              our investors, as our sole focusis on arbitrage and profit
              maximization
            </div>
          </div>
        </div>
      </div>

      <div class="mainB mainPag4"  ref="page4">
        <div class="mainbox" style="background: none">
          <div class="text" style="width: 35%">
            <div class="label">
              <div style="font-weight: bold; font-size: 52px">
                ULTIMATE GOAL
              </div>
            </div>

            <div class="smallText" style="font-style: normal">
              Determined to pioneer a transaction processorcapable of managing
              transactions atpicosecond'speeds (trillionths of a
              second)alongside the strategic establishment of anetwork of
              microwave transmission transferstations in key regions. Microwave
              transmissionoffers unparalleled flexibility and speedcompared to
              traditional optical fibercharacterized by swift deployment,
              minimalinvestment, and versatile application
            </div>
          </div>
          <div class="imgbox" style="width: 66%; padding-top: 100px">
            <img src="../assets/img/main3.png" alt="" style="width: 80%" />
          </div>
        </div>
      </div>

      <div class="mainB mainPag4"  ref="page5">
        <div class="mainbox" style="background: none">
          <div class="text">
            <div class="label">
              <div style="font-weight: bold; font-size: 44px">
                PICO PRIME HIGH
              </div>
              <div style="font-weight: bold; font-size: 44px">
                FREOUENCY SYSTEM
              </div>
            </div>

            <div class="smallText" style="font-style: normal">
              While high-frequency trading systems have been established formany
              years, what distinguishes the Pico Prime High-FrequencySystem is
              its innovative approach. Developed by our R&D team,this system
              integrates a variety of cutting-edge technologieswith
              high-frequency trading techniques
            </div>

            <div class="createBtn" style="margin-top: 30px">
              <span>Learn More</span>
              <img src="../assets/img/right.png" alt="" />
            </div>
          </div>
          <div class="imgbox" style="padding-top: 100px">
            <img src="../assets/img/main4.png" alt="" style="width: 80%" />
          </div>
        </div>
      </div>

      <div class="mainbox mainPag4 mainPage5"  ref="page6">
        <div class="title">
          " The Pico Prime High-Frequency System excels in its ability to
          execute high-frequency trading for a vast number ofretail investors
          simultaneously withina short timeframe."
        </div>
        <div class="desc">
          The Pico Prime high-frequency system boasts numerous advantages in the
          trading market.leveraging computer algorithms to make precise trading
          decisions regarding timing, price,quantity, and other parameters of
          the order.
        </div>
        <div class="desc">
          This method offers the advantage of mitigating human and emotional
          influences, ensuringmore precise order placement. Additionally, it
          automatically assesses whether to break downlarge orders into smaller
          ones, minimizing market impact, and facilitating a high volume
          oftrading operations.
        </div>
        <div class="desc">
          With this innovative system offering a comprehensive and user-friendly
          experience, the Group isconfident in breaking into the European and
          American markets while expanding its presence inAsia. following the
          successful completion of final testing for the Pico Prime
          high-frequencysystem, it is poised to enter the Asian market in 2022,
          heralding a new chapter in the business sector
        </div>
      </div>

      <div class="mainbox mainPag7 mainPage6"  ref="page7">
        <img src="../assets/img/icon1.png" class="icon1" alt="" />
        <div class="page6_left">
          <div class="title">
            <div>WHAT IS HIGH</div>
            <div>FREOUENCY</div>
            <div>TRADING (HFT)</div>
          </div>
          <div class="desc">
            HFT refers to an automatic tradingsystem that executes transactions
            at thespeed of light or even surpasses it.
          </div>
        </div>
        <div class="page6_right">
          <div class="title">HIGH FREOUENCY TRADING</div>
          <div class="desc">
            This system excels at swiftly identifying profit opportunities
            andpromptly exiting the market within extremely short intervals of
            pricefluctuations. lt capitalizes on minute changes in bid-ask
            spreads ofsecurities or the narrow spreads of commodities across
            variousexchanges. Typically, high-speed transactions are executed
            throughcomputerized order book programs, enabling profits to be
            derivedfrom the spread between buying and selling prices of
            commodities.Furthermore, high-frequency trading operates on robust
            and intricatecomputer algorithms capable of executing a multitude of
            tradingorders within a brief timeframe.
          </div>
        </div>
      </div>

      <div class="mainbox mainPage8"  ref="page8">
        <div class="page6_left">
          <div class="title">
            <div>HISTORY OF HIGH</div>
            <div>FREQUENCY TRADING.</div>
          </div>
          <div class="colorText">T7TH CENTURY</div>
          <div class="small">
            <div>
              The Rothschild family ingeniously utilized carrier pigeons to
              transmit messages, effectively capitalizing on arbitrage
              opportunities in securities prices across international borders.
            </div>
            <div>
              Bloomberg secured a $30 million investment from Merrill Lynch to
              pioneer the first electronic quotationsystem, subsequently
              delivering real-time market data and analysis to financial firms
              on Wall Street.
            </div>
            <div>
              The U.s. Securities and Exchange Commission (SEc) sanctioned
              electronic exchanges, clearing the path forhigh-freguency trading
              services capable of executing trades more than 1.000 times faster
              than humans
            </div>
            <div>HFT achieved execution speeds on the order of seconds</div>
          </div>
          <div class="colorText">IN 2012</div>
          <div class="small">
            <div>
              The execution speed of HFT has surpassed the nanosecond threshold,
              accounting for 70% of transactions in the US stock market.
            </div>
          </div>
        </div>
        <div class="page6_right">
          <div class="imgbox">
            <img src="../assets/img/main5.png" alt="" />
          </div>
        </div>
      </div>

      <div class="mainbox mainPage9"  ref="page9">
        <div class="top">
          <div class="texts">
            <div class="title">VERSATILE STRATEGIES, DIVERSE MARKETS</div>
            <div class="desc">
              We analyze an array of markets and trading instruments to optimize
              coverage and profitability for our community.
            </div>
            <div class="desc">
              From long-term investments to intra-day trades, we empower our
              community to profit in any market direction.
            </div>
            <div class="desc">
              We leverage market fluctuations to our advantage
            </div>
          </div>
          <div class="img">
            <img src="../assets/img/main6.png" alt="" srcset="" />
          </div>
        </div>
        <div class="top">
          <div class="img">
            <img src="../assets/img/main7.png" alt="" srcset="" />
          </div>
          <div class="texts">
            <div class="title">HIGH-END TECHNOLOGY</div>
            <div class="desc">
              competition: algorithm execution speed In the realm of
              high-frequency trading, breakthrough algorithms take a backseat to
              the primary
            </div>
            <div class="desc">
              Our technical team, in collaboration with cutting-edge technology
              suppliers, has harnessed the most advanced hard-core technology in
              the market: "hollow core fiber".
            </div>
            <div class="desc">
              This groundbreaking fiber outperforms any ordinary fiber, boasting
              transmission speeds in the range of hundreds of nanoseconds (one
              nanosecond equals one billionth of a second)
            </div>
            <div class="desc">
              Compared to standard optical fibers of equal length, its
              transmission speed can be reduced by approximately one-third of
              the time.
            </div>
            <div class="desc">
              The key lies in Pico Prime's mastery of the entire production
              chain of this technology, significantly reducing the previously
              exorbitant server architecture costs.
            </div>
          </div>
        </div>
      </div>

      <div class="mainbox mainPag7 mainPage6 mainPage10"  ref="page10">
        <div class="page6_left">
          <div class="title">
            <div>INNOVATICE</div>
            <div>TECHNOLOGY</div>
          </div>
          <div class="img">
            <img src="../assets/img/main8.png" alt="" />
          </div>
        </div>
        <div class="page6_right">
          <div class="title">HIGH FREOUENCY TRADING</div>
          <div class="desc">
            Process a large volume of orders within milliseconds, equivalent
            toone thousandth of a second, to maximize profitability and
            executetrades ahead of the market. HFT algorithms are capable of
            scanningdozens of public and private marketplaces simultaneously.
            They canswiftly identify trends, adjust orders, and adapt strategies
            withinmilliseconds.
          </div>
          <div class="title">RISK MANAGEMENT</div>
          <div class="desc">
            In the highly volatile trading market, engaging in arbitrage within
            avery short timeframe helps mitigate the risk associated with
            holdingpositions. This approach avoids tying up large amounts of
            capital,accumulating positions, or holding portfolios overnight.
          </div>
          <div class="title">FEARLESS MARKET</div>
          <div class="desc">
            High-frequency technology and quantitative trading strategies
            haveachieved a detachment of profits from market conditions. Whether
            ina bull or bear market, greater market volatility translates to
            increasedprofit potential.
          </div>
          <div class="title">OUALITY TRADING</div>
          <div class="desc">
            Utilize quantitative trading strategies to transcend traders"
            subjectiveemotions, enabling powerful computers to execute
            transactions morefrequently and efficiently.
          </div>
        </div>
      </div>

      <div class="mainbox11"  ref="page11">
        <div class="list">
          <img src="../assets/img/icon2.png" alt="" />
          <div class="title">ACCESSIBLE ENTRY POINT</div>
          <div class="desc">The minimum deposit amount is U100.</div>
        </div>
        <div class="list">
          <img src="../assets/img/icon3.png" alt="" />
          <div class="title">EXPANDED PRODUCT PAIRINGS</div>
          <div class="desc">
            Forex, gold, indices, cryptocurrencies, andmore. Diverse pairings
            for enhanced profitopportunities
          </div>
        </div>
        <div class="list">
          <img src="../assets/img/icon4.png" alt="" />
          <div class="title">PRESTIGIOUS CUSTOMER BONUS</div>
          <div class="desc">
            Forex, gold, indices, cryptocurrencies, andmore. Diverse pairings
            for enhanced profitopportunities
          </div>
        </div>
        <div class="list">
          <img src="../assets/img/icon5.png" alt="" />
          <div class="title">INTUITIVE USER EXPERIENCE</div>
          <div class="desc">
            Sleek Design, Comprehensive Reporting, User-Friendly Operation, and
            Robust Security SystemWith our mobile and tablet
            applications,experience world-class trading on-the-go.anytime,
            anywhere, for effortless investment enjoyment.
          </div>
        </div>
        <div class="list">
          <img src="../assets/img/icon6.png" alt="" />
          <div class="title">CUTTING-EDGE TECHNOLOGY</div>
          <div class="desc">
            The performance of "hollow core fiber'surpasses that of any
            conventional fiber, withtransmission speeds in the range of hundreds
            ofnanoseconds(one nanosecond equals onebillionth of a second). The
            algorithm's executionspeed determines the opportunity to profit
            frommarket entry
          </div>
        </div>
        <div class="list">
          <img src="../assets/img/icon7.png" alt="" />
          <div class="title">OPEN,TRANSPARENT,AND INCLUSIVE</div>
          <div class="desc">
            With the group's brand-new unique tradingstrategy. All transaction
            records are made publicfor customer review.
          </div>
        </div>
      </div>

      <div class="mainbox12"  ref="page12">
        <div class="logo">
          <img src="../assets/img/main10.png" alt="" />
        </div>
        <div class="name">Pico Prime LLC</div>
        <div class="desc">(Business lD:0600165172)</div>
        <div class="desc">(Certificate Number: 6000164853)</div>
        <div class="desc">
          Address |301 Route 17 North Rutherford, N)07070, New Jersey, 07070,
          USA
        </div>
        <div class="link">
          <span>Contact</span>
          <img src="../assets/img/main11.png" alt="" />
          <img src="../assets/img/main12.png" alt="" />
          <img src="../assets/img/main13.png" alt="" />
        </div>
        <div class="desc">Pico Prime LLC</div>
        <div class="desc" style="margin-top: 5px">
          Copyright © 2024 Pico Prime. All Rights Reserved
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      nowPage: 1,
    };
  },
  mounted(){
    if(this.$route.query){
      this.toPage(this.$route.query.num,this.$route.query.name)
    }
  },
  methods: {
    toPage(num, name) {
      this.nowPage = num;
      console.log(num)
      const el = this.$refs[name];
      if (el) {
        const top = el.offsetTop;
        // 使用window.scrollTo实现平滑滚动
        window.scrollTo({
          top: top,
          behavior: "smooth",
        });
      }
    },
    handleCommand(e) {
      this.nowPage = e;
      let name = 'page'+e
      this.toPage(e,name)
    },
    toLogin(){
      this.$router.push('/login');
    }
  },
};
</script>

<style lang="scss" scoped>
.headerpage {
  width: 100%;
  height: 65px;
  display: flex;
  align-items: center;
  padding: 0 10%;
  background-image: linear-gradient(90deg, #2a5550 10%, #1f415c 100%);
  color: #fff;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 1000;
  .logo {
    display: flex;
    align-items: center;
    font-weight: bold;
    img {
      width: 40px;
      margin-right: 10px;
    }
  }

  .links {
    color: #fff;
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 3%;
    a {
      color: #fff;
    }
    div {
      cursor: pointer;
    }
    .active{
      color: #d3ff3f;
      font-weight: bold;
    }
    .engbox {
      display: flex;
      align-items: center;
      img {
        width: 25px;
        margin-right: 5px;
      }
    }
  }

  .loginBtn {
    width: 100px;
    height: 35px;
    background-image: url("../assets/img/btn.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    span {
      transform: translateY(-3px);
      cursor: pointer;
      font-size: 14px;
    }
  }
}

.mainPage {
  .mainbox {
    width: 100%;
    height: calc(100vh);
    background-image: linear-gradient(9deg, #499580 10%, #356f97 100%);
    padding: 0 10%;
    display: flex;
    align-items: center;
    .text {
      width: 40%;
      .label {
        font-style: italic;
        color: #fff;
        div {
          font-size: 38px;
        }
      }
      .other {
        margin: 20px 0;
        color: #d3ff3f;
        font-style: italic;
        font-size: 18px;
      }
      .createBtn {
        width: 160px;
        height: 45px;
        background-image: url("../assets/img/btn.png");
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 5px;
        font-weight: 500;
        cursor: pointer;
        img {
          margin-left: 8px;
          width: 20px;
        }
      }

      .smallText {
        font-style: italic;
        color: #fff;
        margin-top: 40px;
        line-height: 30px;
      }
    }

    .imgbox {
      width: 60%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      img {
        width: 90%;
        height: auto;
      }
    }
  }

  .mainPage2 {
    width: 100%;
    height: 100vh;
    padding: 0 10%;
    display: flex;
    align-items: center;
    background-image: url("../assets/img/bg1.png");
    background-size: 100% 100%;
    justify-content: space-between;
    .leftText {
      width: 35%;
      .title {
        font-weight: bold;
        font-size: 43px;
        font-style: italic;
        color: #fff;
        margin-bottom: 30px;
      }

      .label {
        color: #fff;
        font-size: 20px;
        line-height: 34px;
      }

      img {
        width: 80%;
        margin-top: 100px;
      }
    }

    .rightText {
      width: 58%;
      .title1 {
        font-size: 44px;
        font-style: italic;
        color: #d3ff3f;
        font-weight: bold;
      }
      .desc {
        color: #fff;
        margin-top: 20px;
        line-height: 27px;
      }
    }
  }

  .mainPage3 {
    width: 100%;
    height: 100vh;
    padding: 0 10%;
    display: flex;
    background-image: url("../assets/img/bg1.png");
    background-size: 100% 100%;
    justify-content: space-between;
    padding-top: 100px;
    .lists {
      width: 30%;
      img {
        width: 100%;
        height: auto;
      }

      .text {
        .title {
          color: #d3ff3f;
          font-weight: bold;
          margin-top: 30px;
          font-style: italic;
          font-size: 28px;
          margin-bottom: 20px;
        }
        .desc {
          color: #fff;
          line-height: 30px;
        }
      }
    }
  }

  .mainPag4 {
    background-image: url("../assets/img/bg2.png");
    background-size: 100% 100%;
  }

  .mainPag7 {
    background-image: url("../assets/img/bg3.png");
    background-size: 100% 100%;
  }

  .mainPage5 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .title {
      color: #fff;
      font-size: 29px;
      font-weight: bold;
      font-style: italic;
      margin-bottom: 10px;
    }
    .desc {
      color: #fff;
      margin-top: 25px;
      font-size: 19px;
      font-weight: 100;
    }
  }

  .mainPage6 {
    position: relative;
    .icon1 {
      position: absolute;
      right: 11%;
      top: 11%;
      width: 200px;
    }
    .page6_left {
      height: 100%;
      width: 45%;
      background: #0000002b;
      padding: 0 3%;
      padding-top: 10%;

      .title {
        div {
          font-size: 50px;
          font-weight: bold;
          font-style: italic;
          color: #fff;
        }
      }
      .desc {
        color: #fff;
        margin-top: 40px;
        padding-right: 10%;
        line-height: 27px;
        font-size: 17px;
      }
    }
    .page6_right {
      height: 100%;
      width: 55%;
      padding: 0 3%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .title {
        color: #d3ff3f;
        font-size: 28px;
        font-style: italic;
        font-weight: bold;
        margin-bottom: 20px;
      }
      .desc {
        color: #fff;
        line-height: 30px;
      }
    }
  }

  .mainPage8 {
    background-image: url("../assets/img/bg3.png");
    background-size: 100% 100%;
    .page6_left {
      width: 60%;
      .title {
        div {
          color: #fff;
          font-size: 50px;
          font-weight: bold;
          font-style: italic;
        }
      }
      .colorText {
        font-size: 28px;
        font-weight: bold;
        font-style: italic;
        color: #d3ff3f;
        margin: 20px 0;
        margin-top: 3%;
      }
      .small {
        color: #fff;
        font-size: 16px;
        div {
          margin-bottom: 3%;
        }
      }
    }
    .page6_right {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: flex-end;
      .imgbox {
        width: 100%;
      }
      img {
        width: 100%;
      }
    }
  }

  .mainPage9 {
    background-image: url("../assets/img/bg3.png");
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    .top {
      width: 100%;
      height: 50%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .texts {
        width: 60%;
        .title {
          font-weight: bold;
          font-size: 28px;
          font-style: italic;
          margin-bottom: 20px;
          color: #d3ff3f;
        }
        .desc {
          color: #fff;
          margin-bottom: 10px;
        }
      }
      .img {
        width: 40%;
        display: flex;
        justify-content: center;
        img {
          width: 50%;
        }
      }
    }
  }

  .mainPage10 {
    .page6_left {
      background: none;
      width: 50%;
      img {
        width: 70%;
        transform: translateX(-50px);
      }
    }
    .page6_right {
      background: #0000002b;
      width: 50%;
      .title {
        margin-bottom: 10px;
        margin-top: 20px;
        font-size: 26px;
      }
      .desc {
        font-size: 16px;
        line-height: 20px;
      }
    }
  }
}

.mainbox11 {
  width: 100%;
  height: calc(100vh);
  padding: 2% 10%;
  display: flex;
  align-items: center;
  background-image: url("../assets/img/bg1.png");
  background-size: 100% 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  .list {
    width: 31%;
    height: 46%;
    border: 1px solid #cedca0;
    background: #3c8477;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 0 2%;
    padding-top: 10px;
    overflow: hidden;
    img {
      width: 100px;
      height: auto;
      margin: 20px 0;
    }
    .title {
      color: #d3ff3f;
      font-weight: bold;
      font-style: italic;
      font-size: 1.4rem;

      margin-bottom: 10px;
      text-align: center;
    }
    .desc {
      color: #fff;
      text-align: center;
      font-size: 1rem;
    }
  }
}

.mainbox12 {
  width: 100%;
  height: calc(100vh);
  background-image: linear-gradient(9deg, #499580 10%, #356f97 100%);
  padding: 0 10%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  .logo {
    margin: 0 auto;
    img {
      width: 240px;
    }
  }
  .name {
    color: #fff;
    font-size: 38px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .desc {
    color: #fff;
    margin-top: 15px;
  }

  .link {
    width: 70%;
    height: 80px;
    background: #0000002b;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d3ff3f;
    img {
      width: 50px;
      height: auto;
      margin-left: 20px;
      cursor: pointer;
    }
  }
}

.el-dropdown-link {
  color: #fff;
}
</style>
